<template>
	<view class="page">
		<headerinfo></headerinfo>
		<!-- 用户信息 -->
		<user-info ref="userInfo" :username="username" @showRelease="releaseDia = true"/>
		<!-- 滑动列表 -->
		<view class="o-content">
			<!-- 菜单  -->
			<view class="tab-content">
				<articlelist :username="username"></articlelist>
			</view>
		</view>
		
		<u-popup :show="releaseDia" round="20" @close="releaseDia = false">
			<release @closeDia="closeDia" @toDraft="toDraft"></release>
		</u-popup>
	</view>
</template>

<script>
import userInfo from './components/user_info.vue'
import articlelist from './components/articlelist.vue'
import release from '@/components/release.vue';
export default {
	components:{
		userInfo,articlelist,release
	},
	data() {
		return {
			releaseDia: false,
			tabIndex:0,
			username:'',
			tablist:[{
				name:'全部',
				val:''
			},{
				name:'微头条',
				val:'1'
			},{
				name:'小视频',
				val:'2'
			}],
			listContent:[
				{id:1,name:'第一个页面'},
				{id:2,name:'第二个页面'},
				{id:3,name:'第三个页面'},
				{id:4,name:'第四个页面'},
			],
			swiperheight:400
		};
	},
	onLoad(e) {
		if(e.username){
			this.username = e.username
		}
		console.log(e)
	},
	onShow() {
		if(this.username){
			this.getData2()
		}else{
			this.getData()
		}
	},
	methods: {
		
		getData(){
			
			this.$api.myInfo().then(res=>{
				this.$refs.userInfo.init(res)
			})
		},
		getData2(){
			let data = {
				username:this.username
			}
			this.$api.myInfo(data).then(res=>{
				this.$refs.userInfo.init(res)
			})
		},
		tabClick(index){
			this.tabIndex=index
		},
		tabChange(e){
			console.log(e);
			var index = e.detail.current;
			this.tabIndex = index;
		},
		closeDia(){
			this.releaseDia = false
		},
		toDraft(){
			uni.navigateTo({
				url: '/pages/draft/index'
			});
		},
	}
};
</script>


<style lang="scss" scoped>
	.o-content{
		background-color: #fff;
	}
	.tabMenu{
		width: 100%;
		display: flex;
		flex-wrap: nowrap;
		white-space: nowrap;
		height: 90rpx;
		border-bottom: 1px solid #f8f8f8;
		position: relative;
		.iconfont{
			position: absolute;
			right: 30rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	
	.tab-list{
		display: inline-block;
		padding: 20rpx;
		text-align: center;
		box-sizing: border-box;
		margin: 0 20rpx;
		color: #333;
		font-size: 30rpx;
	}
	.actived{
		color: #000;
		border-bottom: 2px solid red;
	}
</style>